<template>
    <div class="container">
        <div class="passwd">
            <div>
                <van-field v-model="params.phone" name="phone" label="手机号" placeholder="输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]">
                    <template #button>
                        <van-button type="primary" size="small" @click="send">获取验证码</van-button>
                    </template>
                </van-field>
                <van-field v-model="code" name="code" label="验证码" placeholder="输入验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                </van-field>
                <van-field v-model="data.password" name="password" label="密码" placeholder="输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]">
                </van-field>
                <van-button round block type="danger" @click="submit">提交</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import {forgetPasswd,registerCode} from '@/api/login.js'
import { Toast } from 'vant'
export default {
    data() {
        return {
            params:{
                phone:'',
                type:'login',
                
            },
            code:'',
            data:{
                account:'',
                captcha:'',
                password:''
            }
        }
    },
    methods:{
        send(){
            registerCode(this.params).then(res=>{
                Toast.success('您的验证码为'+res.data);
                this.code=res.data;
                this.data.account=this.params.phone;
            })
        },
        submit(){
            forgetPasswd(this.data).then(res=>{
                console.log(res);
                Toast.success('修改成功');
                this.$router.push('/login')
            })
        }
    }
}
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
}
</style>